chrome-devtools-frontend 1.0.1516909 → 1.0.1518653

package/docs/checklist/README.md

@@ -46,7 +46,7 @@ in the Elements tab looks alright and works as expected (typically, this require
 
 Verify that the new properties show up in the DevTools Console autocomplete functionality (typically, this requires no additional implementation effort).
 To enable argument hints for new or changed parameterized functions, run
-```
+```bash
 devtools-frontend/src/scripts/deps/roll_deps.py
 ```
 to re-generate `devtools-frontend/src/front_end/models/javascript\_metadata/NativeFunctions.js` ([Example CL](http://crrev.com/c/3432787)).
@@ -88,7 +88,7 @@ Example for `:target`: [Chromium back-end CL](https://chromium-review.googlesour
 
 To recognize new CSS properties/values in the DevTools Styles panel’s autocomplete functionality, roll
 [Chromium’s `css_properties.json5`](https://source.chromium.org/chromium/chromium/src/+/main:third\_party/blink/renderer/core/css/css_properties.json5;drc=be2c473625b9c28a4ff6735547cb0c1b6743f4ae) into the `devtools-frontend` repository by running
-```
+```bash
 devtools-frontend/src/scripts/deps/roll_deps.py
 ```
 see this [example CL](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2972583).

package/docs/checklist/javascript.md

@@ -306,7 +306,7 @@ NLFs that contain control flow (e.g branches, loops, etc.).
 
 Run `d8` with `--lcov` and check whether the produced coverage information is correct. E.g. like this:
 
-```
+```bash
 ./d8 --lcov=cov.info test.js
 genhtml cov.info -o coverage
 ```

package/docs/contributing/README.md

@@ -187,7 +187,7 @@ Once you’re done preparing your patch, it’s time to upload your changes.
 
 After that, you are ready to start the patch upload:
 
-```
+```bash
 # upload your patch to codereview…
 git cl upload
 ```

package/docs/contributing/settings-experiments-features.md

@@ -49,13 +49,13 @@ const base::FeatureParam<double> kDevToolsNewFeatureDoubleParam{
 
 Start Chrome via command line including flags:
 
-```
+```bash
 out/Default/chrome --enable-features=DevToolsNewFeature
 ```
 
 You can even pass additional feature parameters:
 
-```
+```bash
 out/Default/chrome --enable-features="DevToolsNewFeature:string_param/foo/double_param/0.5"
 ```
 
@@ -113,7 +113,8 @@ In DevTools, you need to register the experiment. This is done in
 Root.Runtime.experiments.register(
   'yourExperimentNameHere',
   'User facing short description of experiment here',
-  false);
+  false,
+);
 ```
 
 The first argument is the experiment's label, and **this must match the label
@@ -134,9 +135,9 @@ documentation and a way to provide feedback:
 Root.Runtime.experiments.register(
   'jsProfilerTemporarilyEnable',
   'Enable JavaScript Profiler temporarily',
-   /* unstable= */ false,
-   /* documentation */ 'https://goo.gle/js-profiler-deprecation',
-   /* feedback */ 'https://crbug.com/1354548'
+  /* unstable= */ false,
+  /* documentation */ 'https://goo.gle/js-profiler-deprecation',
+  /* feedback */ 'https://crbug.com/1354548',
 );
 ```
 
@@ -149,7 +150,7 @@ Once the experiment is registered, you can check if it is enabled and use this
 to run certain code blocks conditionally:
 
 ```ts
-if(Root.Runtime.experiments.isEnabled('yourExperimentNameHere')) {
-   // Experiment code here
+if (Root.Runtime.experiments.isEnabled('yourExperimentNameHere')) {
+  // Experiment code here
 }
 ```

package/docs/cookbook/devtools_on_devtools.md

@@ -43,7 +43,7 @@ set up your Chrome or Chromium instance for earlier versions of M-136 and M-135.
 
 Then in your `devtools-frontend` checkout, use
 
-```
+```bash
 ./third_party/chrome/chrome-linux/chrome \
    --disable-infobars \
    --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
@@ -51,7 +51,7 @@ Then in your `devtools-frontend` checkout, use
 
 on Linux or
 
-```
+```bash
 ./third_party/chrome/chrome-mac/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing \
   --disable-infobars \
   --disable-features=MediaRouter \

package/docs/cookbook/localization.md

@@ -15,7 +15,7 @@ Before proceeding, make sure you know the different
 
 Code example:
 
-```js
+```ts
 import * as i18n from '../i18n/i18n.js';
 
 // at the top of example.js file, after import statements
@@ -57,7 +57,7 @@ console.log(message2);
     to it. If there isn't `UIStrings = {}` in the file, create one and add your
     string, also register the new UIStrings into the `en-US.json` by adding:
 
-    ```js
+    ```ts
     // Filename should be relative to front_end folder
     const str_ = i18n.i18n.registerUIStrings('<filename>', UIStrings);
     const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -145,7 +145,7 @@ The basic API to make a string (with or without placeholder) localizable. The
 first argument is the string reference in `UIStrings` The second argument is an
 object for placeholders (if any)
 
-```js
+```ts
 // at the top of example.js file, after import statements
 
 const UIStrings = {
@@ -172,7 +172,7 @@ locale, which are not available until after DevTools has finished starting up.
 Calls to `i18nString` in the module scope will therefore fail when the module is
 imported.
 
-```js
+```ts
 // Fails because i18nString runs at module-import time.
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
@@ -188,7 +188,7 @@ function notTopLevel() {
 closure that returns a `LocalizedString`. It can be used in top-level calls;
 just make sure use-sites know it's a function now.
 
-```js
+```ts
 // Works because i18nLazyString defers the loading of the translated string until later.
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
@@ -207,7 +207,7 @@ This call returns a **span element**, not a string. It is used when you want to
 construct a DOM element with a localizable string, or localizable content that
 contains some other DOM element.
 
-```js
+```ts
 // Create the string in UIString
 /**
 *@description Message in Coverage View of the Coverage tab
@@ -228,7 +228,7 @@ This call is a named cast. Use it in places where a localized string is expected
 but the term you want to use does not require translation. Instead of locking
 the whole phrase or using a placeholder-only phrase, use `lockedString`.
 
-```js
+```ts
 someFunctionRequiringALocalizedString(i18n.i18n.lockedString('HTTP'));
 ```
 
@@ -240,7 +240,7 @@ languages!
 
 **Good description**:
 
-```js
+```ts
 const UIStrings = {
   /**
    * @description Tooltip text that appears when hovering over the 'Focusable' attribute name under the Computed Properties section in the Accessibility pane of the Elements pane.
@@ -251,7 +251,7 @@ const UIStrings = {
 
 **Bad description**:
 
-```js
+```ts
 const UIStrings = {
   /**
    * @description Elements pane 'Focusable' tooltip.
@@ -289,7 +289,7 @@ const UIStrings = {
 Any text within the backticks will not be translated. For example, if the
 'robots.txt' in string 'Requesting for robots.txt …' should not be translated:
 
-```js
+```ts
 // in example.js file
 
 import * as i18n from '../i18n/i18n.js';

package/docs/devtools-protocol.md

@@ -73,9 +73,9 @@ Open the file
 `third_party/blink/renderer/core/inspector/inspector_protocol_config.json` and
 under `protocol.options`, add your new domain:
 
-```
+```json
 {
-    "domain": "YourNewDomain"
+  "domain": "YourNewDomain"
 }
 ```
 
@@ -85,7 +85,7 @@ Build chromium as you normally would.
 #### 1.6- See the newly generated protocol C++ files
 Your new domain files should be generated in this folder:
 
-```
+```bash
 src/out/Default/gen/third_party/blink/renderer/core/inspector/protocol/your_new_domain.cc
 src/out/Default/gen/third_party/blink/renderer/core/inspector/protocol/your_new_domain.h
 ```
@@ -94,7 +94,7 @@ src/out/Default/gen/third_party/blink/renderer/core/inspector/protocol/your_new_
 
 Open the file `devtools-frontend/front_end/core/protocol_client/InspectorBackend.ts` and add a new method to expose your Agent.
 
-```
+```ts
 youNewDomainAgent(): ProtocolProxyApi.YourNewAgentApi {
     return this.getAgent('YourNewAgent');
 }
@@ -112,13 +112,14 @@ outputs = [
 ...
 "inspector/protocol/your_new_domain.cc",
 "inspector/protocol/your_new_domain.h",
+]
 ```
 
 ### 2- Sync the browser_protocol files and generate the protocol resources
 As mentioned before, there are many browser_protocol files. To synchronize the
 modifications, run this command from your Chrome DevTools repository:
 
-```
+```bash
 scripts/deps/roll_deps.py ~/chromium/src .
 ```
 
@@ -132,7 +133,7 @@ Chrome DevTools repository.
 The Agent class should inherit the newly created protocol
 `protocol::YourNewDomainAgent::Metainfo`
 
-```
+```cpp
 class MODULES_EXPORT YourNewDomainAgent final : public InspectorBaseAgent<protocol::YourNewDomainAgent::Metainfo> {
 ```
 
@@ -141,7 +142,7 @@ The Agent must be registered with the Session. To do so, go to the file
 `third_party/blink/renderer/modules/modules_initializer.cc` and append it to the
  session in this method:
 
-```
+```cpp
 void ModulesInitializer::InitInspectorAgentSession {
 …
 session->CreateAndAppend<YourNewAgent>...
@@ -151,7 +152,7 @@ session->CreateAndAppend<YourNewAgent>...
 In the TypeScript class, your agent can now be accessible directly from the
 target. With the target, you can simply access your agent like this:
 
-```
+```ts
 initialize(target: SDK.Target.Target) {
     target.yourNewDomainAgent();
 }

package/docs/ecosystem/automatic_workspace_folders.md

@@ -54,7 +54,7 @@ workspace folders, it has to contain a `workspace` object with two properties:
 
 An example `com.chrome.devtools.json` would look like this:
 
-```
+```json
 {
   "workspace": {
     "root": "/Users/foobar/Projects/my-awesome-web-project",
@@ -81,7 +81,7 @@ turn on two feature flags in `about:flags`:
 Instead of enabling the feature via `about:flags`, you can instead also enable
 them from the command line:
 
-```
+```bash
 google-chrome-canary --enable-features=DevToolsWellKnown,DevToolsAutomaticFileSystems
 ```
 
@@ -99,7 +99,7 @@ need to do is to create a `.well-known/appspecific` folder and place a
 and you're directly serving the artifacts for your project from its source
 directory in `/Users/foo/bar`, then you could can accomplish the setup via:
 
-```
+```bash
 cd /Users/foo/bar
 mkdir -p .well-known/appspecific
 echo "{\"workspace\":{\"root\":\"${PWD}\",\"uuid\":\"`npx --package uuid uuid v4`\"}}" > .well-known/appspecific/com.chrome.devtools.json

package/docs/get_the_code.md

@@ -59,7 +59,6 @@ gn gen out/fast-build --args="devtools_skip_typecheck=true devtools_bundle=false
 and use `npm run build -- -t fast-build` to build this target (you can of course
 also just change the `Default` target to skip bundling and type checking).
 
-
 ### Rebuilding automatically
 
 You can use
@@ -176,7 +175,6 @@ npm start -- --verbose
 to enable verbose logging, which among other things, also prints all output from Chrome to the terminal, which is
 otherwise suppressed.
 
-
 ##### Controlling the feature set
 
 By default `npm start` will enable a bunch of experimental features (related to DevTools) that are considered ready for teamfood.

package/docs/styleguide/ux/components.md

@@ -76,7 +76,7 @@ space.
 
 Usage with lit-html:
 
-```js
+```ts
 html`<devtools-button class="some-class"
                       .variant=${Buttons.Button.Variant.PRIMARY}
                       .title=${i18nString(UIStrings.someString)}
@@ -86,13 +86,13 @@ html`<devtools-button class="some-class"
 
 Usage with the imperative API:
 
-```js
+```ts
 const button = new Buttons.Button.Button();
 button.data = {
-    variant: Buttons.Button.Variant.PRIMARY,
-    title: i18nString(UIStrings.someString),
-    jslogContext: 'some-context',
-  };
+  variant: Buttons.Button.Variant.PRIMARY,
+  title: i18nString(UIStrings.someString),
+  jslogContext: 'some-context',
+};
 button.classList.add('some-class');
 button.addEventListener('click', event => onClick(event));
 ```
@@ -164,28 +164,36 @@ button.addEventListener('click', event => onClick(event));
 
 Usage with lit-html:
 
-```js
-html`<select aria-label="Choose your champion"
-             @onchange=${onChange}>
+```ts
+html`<select aria-label="Choose your champion" @onchange=${onChange}>
   <option hidden value="Choose your champion"></option>
-  <option jslog=${VisualLogging.item('hamster').track({click: true})}
-          value="Hamster">Hamster</option>
-  <option jslog=${VisualLogging.item('mouse').track({click: true})}
-          value="Mouse">Mouse</option>
-  <option jslog=${VisualLogging.item('cat').track({click: true})}
-          value="Cat">Cat</option>
-</select>`
+  <option
+    jslog=${VisualLogging.item('hamster').track({ click: true })}
+    value="Hamster"
+  >
+    Hamster
+  </option>
+  <option
+    jslog=${VisualLogging.item('mouse').track({ click: true })}
+    value="Mouse"
+  >
+    Mouse
+  </option>
+  <option jslog=${VisualLogging.item('cat').track({ click: true })} value="Cat">
+    Cat
+  </option>
+</select>`;
 ```
 
 Usage with the imperative API:
 
-```js
+```ts
 const select = UI.UIUtils.createSelect('Choose your champion', [
   'Hamster',
   'Mouse',
   'Cat',
 ]);
-select.addEventListener('change', event => onChange(event))
+select.addEventListener('change', event => onChange(event));
 ```
 
 ## Radio Buttons
@@ -212,16 +220,22 @@ select.addEventListener('change', event => onChange(event))
 
 Usage with lit-html:
 
-```js
-const jslog = VisualLogging.toggle().track({change: true}).context(jslogContext);
-html`<label><input type="radio" name=${name} jslog=${jslog}>${title}</label>`
+```ts
+const jslog = VisualLogging.toggle()
+  .track({ change: true })
+  .context(jslogContext);
+html`<label><input type="radio" name=${name} jslog=${jslog} />${title}</label>`;
 ```
 
 Usage with the imperative API:
 
-```js
-const {label, radio} = UI.UIUtils.createRadioButton(name, title, jslogContext);
-radio.addEventListener('change', event => onChange(event))
+```ts
+const { label, radio } = UI.UIUtils.createRadioButton(
+  name,
+  title,
+  jslogContext,
+);
+radio.addEventListener('change', event => onChange(event));
 ```
 
 ## Sliders
@@ -247,19 +261,21 @@ radio.addEventListener('change', event => onChange(event))
 
 Usage with lit-html:
 
-```js
-html`<input type="range"
-            min=${min}
-            max=${max}
-            tabindex=${tabIndex}
-            @change=${onChange}>`
+```ts
+html`<input
+  type="range"
+  min=${min}
+  max=${max}
+  tabindex=${tabIndex}
+  @change=${onChange}
+/>`;
 ```
 
 Usage with the imperative API:
 
-```js
+```ts
 const slider = UI.UIUtils.createSlider(min, max, tabIndex);
-slider.addEventListener('change', event => onChange(event))
+slider.addEventListener('change', event => onChange(event));
 ```
 
 ## Icons
@@ -293,13 +309,13 @@ For some frequently used icons e.g. cross-circle, warning-filled etc. colors are
 
 Usage with lit-html:
 
-```js
-html`<devtools-icon name=${'some-icon-name'}></devtools-icon>`
+```ts
+html`<devtools-icon name=${'some-icon-name'}></devtools-icon>`;
 ```
 
 Usage with the imperative API:
 
-```js
+```ts
 const someIcon = IconButton.Icon.create('some-icon-name', 'some-class');
 ```
 
@@ -379,53 +395,71 @@ Generally, we do not recommend using shortcuts in context menus since this goes
 
 Usage with lit-html (left-click on a `<devtools-menu-button>` opens a menu):
 
-```js
+```ts
 html`
-<devtools-menu-button
-  icon-name="some-icon-name"
-  .populateMenuCall=${(menu: UI.ContextMenu.ContextMenu) => {
-    menu.defaultSection().appendItem('Item', () => {
-      console.log('Item clicked');
-    }, {jslogContext: 'item'});
-  }}
-  jslogContext="my-menu-button"
-></devtools-menu-button>
-`
+  <devtools-menu-button
+    icon-name="some-icon-name"
+    .populateMenuCall=${(menu: UI.ContextMenu.ContextMenu) => {
+      menu.defaultSection().appendItem(
+        'Item',
+        () => {
+          console.log('Item clicked');
+        },
+        { jslogContext: 'item' },
+      );
+    }}
+    jslogContext="my-menu-button"
+  ></devtools-menu-button>
+`;
 ```
 
 Usage with the imperative API (menu shows on a right-click)
 
 Various simple menu items:
 
-```js
+```ts
 const element = this.shadowRoot.querySelector('.element-to-add-menu-to');
 element.addEventListener('contextmenu', (event: MouseEvent) => {
   const contextMenu = new UI.ContextMenu.ContextMenu(event);
 
-// Regular item
-  contextMenu.defaultSection().appendItem('Regular item', () => {
-    console.log('Regular item clicked ');
-  }, { jslogContext: 'regular-item' });
-
-// Disabled item
-  contextMenu.defaultSection().appendItem('Disabled item', () => {
-    console.log('Will not be printed');
-  }, { jslogContext: 'disabled-item',
-       disabled: true });
-
-// Experimental item
-  const item = contextMenu.defaultSection().appendItem('Experimental item', () => {
-    console.log('Experimental item clicked');
-  }, { jslogContext: 'experimental-item',
-       isPreviewFeature: true });
-
-// Separator
+  // Regular item
+  contextMenu.defaultSection().appendItem(
+    'Regular item',
+    () => {
+      console.log('Regular item clicked ');
+    },
+    { jslogContext: 'regular-item' },
+  );
+
+  // Disabled item
+  contextMenu.defaultSection().appendItem(
+    'Disabled item',
+    () => {
+      console.log('Will not be printed');
+    },
+    { jslogContext: 'disabled-item', disabled: true },
+  );
+
+  // Experimental item
+  const item = contextMenu.defaultSection().appendItem(
+    'Experimental item',
+    () => {
+      console.log('Experimental item clicked');
+    },
+    { jslogContext: 'experimental-item', isPreviewFeature: true },
+  );
+
+  // Separator
   contextMenu.defaultSection().appendSeparator();
 
-// Checkbox item
-  contextMenu.defaultSection().appendCheckboxItem('Checkbox item', () => {
-    console.log('Checkbox item clicked');
-  }, { checked: true, jslogContext: 'checkbox-item' });
+  // Checkbox item
+  contextMenu.defaultSection().appendCheckboxItem(
+    'Checkbox item',
+    () => {
+      console.log('Checkbox item clicked');
+    },
+    { checked: true, jslogContext: 'checkbox-item' },
+  );
 
   void contextMenu.show();
 });
@@ -433,39 +467,85 @@ element.addEventListener('contextmenu', (event: MouseEvent) => {
 
 Custom section:
 
-```js
-  const customSection = contextMenu.section('Custom section');
-  customSection.appendItem('Section inner item 1', () => { /* ... */ }, {jslogContext: 'my-inner-item-1'});
+```ts
+const customSection = contextMenu.section('Custom section');
+customSection.appendItem(
+  'Section inner item 1',
+  () => {
+    /* ... */
+  },
+  { jslogContext: 'my-inner-item-1' },
+);
 
-  customSection.appendItem('Section inner item 2', () => { /* ... */ }, {jslogContext: 'my-inner-item-2'});
+customSection.appendItem(
+  'Section inner item 2',
+  () => {
+    /* ... */
+  },
+  { jslogContext: 'my-inner-item-2' },
+);
 ```
 
 Sub menu:
 
-```js
-const subMenu = contextMenu.defaultSection().appendSubMenuItem('Item to open sub menu', /* disabled */ false, 'my-sub-menu');
-subMenu.defaultSection().appendItem('Sub menu inner item 1', () => { /* ... */ }, {jslogContext: 'my-inner-item-1'});
-subMenu.defaultSection().appendItem('Sub menu inner item 2', () => { /* ... */ }, {jslogContext: 'my-inner-item-2'});
+```ts
+const subMenu = contextMenu
+  .defaultSection()
+  .appendSubMenuItem(
+    'Item to open sub menu',
+    /* disabled */ false,
+    'my-sub-menu',
+  );
+subMenu.defaultSection().appendItem(
+  'Sub menu inner item 1',
+  () => {
+    /* ... */
+  },
+  { jslogContext: 'my-inner-item-1' },
+);
+subMenu.defaultSection().appendItem(
+  'Sub menu inner item 2',
+  () => {
+    /* ... */
+  },
+  { jslogContext: 'my-inner-item-2' },
+);
 ```
 
 Context menu provider registration (adds items dynamically based on the context menu’s target):
 
 ```js
 // Define provider
-class MyCustomNodeProvider implements UI.ContextMenu.Provider<SomeTarget|SomeOtherTarget> {
-  appendApplicableItems(event: Event, contextMenu: UI.ContextMenu.ContextMenu, target: SomeTarget|SomeOtherTarget) {
+class MyCustomNodeProvider
+  implements UI.ContextMenu.Provider<SomeTarget | SomeOtherTarget>
+{
+  appendApplicableItems(
+    event: Event,
+    contextMenu: UI.ContextMenu.ContextMenu,
+    target: SomeTarget | SomeOtherTarget,
+  ) {
     if (target instanceof SomeTarget) {
-      contextMenu.defaultSection().appendItem('Item 1', () => {
-        console.log('Item 1 clicked');}, {jsLogContext: 'my-item-1'});
+      contextMenu.defaultSection().appendItem(
+        'Item 1',
+        () => {
+          console.log('Item 1 clicked');
+        },
+        { jsLogContext: 'my-item-1' },
+      );
     } else {
-      contextMenu.defaultSection().appendItem('Item 2', () => {
-        console.log('Item 2 clicked');}, {jsLogContext: 'my-item-2'});
+      contextMenu.defaultSection().appendItem(
+        'Item 2',
+        () => {
+          console.log('Item 2 clicked');
+        },
+        { jsLogContext: 'my-item-2' },
+      );
     }
   }
 }
 ```
 
-```js
+```ts
 // Register provider
 UI.ContextMenu.registerProvider<SDK.DOMModel.DOMNode>({
   contextTypes: () => [SomeTarget, SomeOtherTarget],
@@ -479,11 +559,12 @@ UI.ContextMenu.registerProvider<SDK.DOMModel.DOMNode>({
 
 Static menu item registration via ItemLocation (adds an action to a predefined menu location):
 
-```js
+```ts
 UI.ContextMenu.registerItem({
   location: UI.ContextMenu.ItemLocation.NAVIGATOR_MENU_DEFAULT,
   actionId: 'quick-open.show',
   order: undefined,
 });
 ```
+
 This will automatically add the "Open file" action to the context menu that appears when clicking the Elements panel's 3-dot button.